<template>

  <el-scrollbar>

    <div class="iobtn">
      <div @click="inOutClick">
        <i v-if="isCollapse" class="el-icon-arrow-right"></i>
        <i v-else class="el-icon-arrow-left"></i>
      </div>
    </div>

    <el-menu
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      background-color="#323744"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="isCollapse"
      unique-opened
      router>

      <el-submenu v-for="items in asides" :index="items.path" :key="items.id">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{ items.authName }}</span>
        </template>

        <el-menu-item-group>
          <el-menu-item v-for="item in items.children" :index="item.path" :key="item.id">
            <i class="el-icon-menu"></i>
            <span>{{ item.authName }}</span>
          </el-menu-item>
        </el-menu-item-group>
        
      </el-submenu>
    </el-menu>

  </el-scrollbar>
  
</template>

<script>
import { menus } from 'network/home/home';
export default {
    name: 'leftaside',
    data() {
      return {
        asides: [],
        isCollapse: false,
        defaultActive: this.$router.path
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      async getMenus() {
         let { data } = await menus();
         this.asides = data;
         return data;
      },
      inOutClick () {
        this.isCollapse = !this.isCollapse
      },
      handleSelect (index, indexpath) {
        // console.log('select:',index,indexpath);
      },
      setCurrentInde() {
        this.defaultActive = this.$route.name
      }
    },
    created() {
      this.asides = this.getMenus();
    },
    updated: function () {
      this.$nextTick(function () {
        this.setCurrentInde();
      })
    },
    watch: {
      $route () {
        this.setCurrentInde();
      }
    }
}
</script>

<style lang="less" scoped>

.iobtn {
  width: 100%;
  text-align: center;
  font-size: 20px;
}

.el-menu {
  box-sizing: border-box;
  border: none;
}
.el-scrollbar{
  height: 100%;
  width: 100%;
}
.el-scrollbar__bar{
  &.is-vertical{
    width:100px;//滚动条宽度
  }
}
.el-scrollbar__wrap{
  overflow-y: auto;
  overflow-x: hidden;
}
.el-scrollbar__thumb {
  ////可设置滚动条颜色
  background: blue;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }


</style>